<!--  -->
<template>
  <div id="showpop">
   <div class="nav bg-theme color-f text-l" >
     <div style="display:flex;flex:2;">
          <i class="iconfont icon-fanhui font19 pl08 iback" @click="gotoMobile()"></i>
          <!-- 详情进入 -->
          <span class="font19 ml16">
              {{ pagename }}
          </span>
        </div>
          <span v-if='hasCreatIcon' style="margin-right:10px;margin-left:10px">
            <van-icon @click="todraw" name="add-o" size="25"/>
          </span>
            <span  style="margin-right:10px;margin-left:10px">
            <van-icon @click="searchDialog()" name="search" size="25"/>
          </span>
    </div> 
    <div class="pageview">
        <component :is="tabviewName" ref="searchdata" style="height:calc(100vh-50px)"></component>
        <van-popup v-model="showtodoDialog" position="top" style="padding:20px 0 20px 0"
         get-container="#showpop">
            <van-field
             input-align='left'
             label-width="4.5em"
             v-model="todoDialogTitle"
             label="任务标题:"
             placeholder="请填写任务标题"
            />
            <div style="display: flex;margin:20px 0 0 0">
              <div style="width:50% ;text-align: center;">
                 <van-button style=" display: inline-block;margin:0 20px 0 20px;padding:0 36px 0 36px" 
                 @click="chongzhibutton" 
                 type="default"
                 >
                 重置</van-button>
              </div>
             
              <div style="width:50%;text-align: center;">
                 <van-button style=" display: inline-block;margin:0 20px 0 20px;padding:0 36px 0 36px" 
                 @click="cancelbutton" 
                 type="primary" 
                 color="#60a9ec"
                 >
                 查询</van-button>
              </div>
            </div>
        </van-popup>
    
        <van-popup v-model="showtaizhangDialog" position="top" style="padding:20px 0 20px 0"
         get-container="#showpop">
             <van-field
                readonly
                input-align='left'
                label-width="6.5em"
                clickable
                v-model="strtimeval"
                label="发布开始时间:"
                palceholder="请选择开始时间"
                @click="showstrdialog=true"
                />
                <van-popup v-model="showstrdialog" position="bottom" get-container="#showpop">
                    <van-datetime-picker
                    :formatter="formatter"
                    type="date"
                    v-model="nowDate"
                    :min-date="strDate"
                    :max-date="maxDate"
                    @cancel="showstrdialog=false"
                    @confirm="showstrdialogcomfirm"
                    />
                </van-popup>
            <van-field
                readonly
                input-align='left'
                label-width="6.5em"
                clickable
                v-model="endtimeval"
                label="发布结束时间:"
                palceholder="请选择结束时间"
                @click="showenddialog=true"
                />
                <van-popup v-model="showenddialog" position="bottom" get-container="#showpop">
                    <van-datetime-picker
                    :formatter="formatter"
                    type="date"
                    v-model="nowDate"
                    :min-date="strDate"
                    :max-date="maxDate"
                    @cancel="showenddialog=false"
                    @confirm="showenddialogcomfirm"
                    />
                </van-popup>
            
            <van-field
                input-align='left'
                label-width="6.5em"
                v-model="taizhangTitle"
                label="支部学习要点:"
                placeholder="请填写支部学习要点"
            />
            <div style="display: flex;margin:20px 0 0 0">
              <div style="width:50% ;text-align: center;">
                 <van-button style=" display: inline-block;margin:0 20px 0 20px;padding:0 36px 0 36px" 
                 @click="chongzhibutton" 
                 type="default"
                 >
                 重置</van-button>
              </div>
             
              <div style="width:50%;text-align: center;">
                 <van-button style=" display: inline-block;margin:0 20px 0 20px;padding:0 36px 0 36px" 
                 @click="cancelbutton" 
                 type="primary" 
                 color="#60a9ec"
                 >
                 查询</van-button>
              </div>
            </div>
        </van-popup>
        <van-tabbar v-model="active" @change="onchange"> 
            <van-tabbar-item>
                <span>我的工作</span>
                <template #icon="props">
                    <img :src="props.active?icon1.active :icon1.inactive" >
                </template>    
            </van-tabbar-item>
            <van-tabbar-item>
                <span>学习重点台账</span>
                <template #icon="props">
                    <img :src="props.active?icon2.active :icon2.inactive" >
                </template>    
            </van-tabbar-item>
        </van-tabbar>
    </div>
  </div>
</template>

<script type="text/javascript">
import tabview0 from '@/components/xxzdtab0'
import tabview1 from '@/components/xxzdtab1'
import {mapGetters} from 'vuex'
import {Notify} from 'vant'
import moment from 'moment'
import {getUserdata,getTodoList,getDidList} from '@/api/zbjqxxzdapi'
  export default {
    
    data(){
        return{
            tabviewName: '',
            active:0,
            icon1:{
                active:require('@/assets/images/home_checked.png'),
                inactive:require('@/assets/images/home.png')
            },
            icon2:{
                active:require('@/assets/images/zcxj_selected.png'),
                inactive:require('@/assets/images/zcxj.png')
            },
            showtodoDialog:false,
            todoDialogTitle:'',
            showtaizhangDialog:false, //
            nowDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            strDate: new Date(new Date().getFullYear()-10, new Date().getMonth(), new Date().getDate()),
            maxDate: new Date(new Date().getFullYear()+10, new Date().getMonth(), new Date().getDate()),
            showstrdialog:false,
            strtimeval:'',
            showenddialog:false,
            endtimeval:'',
            taizhangTitle:'',
            pagename:'支部近期学习重点',
            hasCreatIcon:false,
            hasCreat:false,
        }
    },
    computed:{
        ...mapGetters(['user']),
    },
    //生命周期--创建完成
    created() {
        this.getUserdatas();
    },
    components:{
        tabview0,
        tabview1
    },
    //生命周期--挂载完成
    mounted() {
        if (window.history && window.history.pushState) {
            console.log('注册物理返回键');
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.gotoMobile, false);//false阻止默认事件
        }
        if(localStorage.getItem('xxzdtabNumber')!=''&&
            localStorage.getItem('xxzdtabNumber')){
             console.log('AAAAAAAAAAA'+ localStorage.getItem('xxzdtabNumber'))    
            this.active=localStorage.getItem('xxzdtabNumber')
            if (this.active==0){
                localStorage.setItem('xxzdtabNumber',0)
                this.tabviewName='tabview0'
                this.pagename='支部近期学习重点'
                this.active=0;
                if(this.hasCreat){
                   this.hasCreatIcon=true  
                }
            }else if (this.active=1){
                localStorage.setItem('xxzdtabNumber',1)
                this.tabviewName='tabview1'
                this.pagename='支部近期学习重点台账'
                this.active=1;
                this.hasCreatIcon=false
            }else{
                localStorage.setItem('xxzdtabNumber',0)
                this.tabviewName='tabview0'
                this.pagename='支部近期学习重点'
                this.active=0;
                if(this.hasCreat){
                   this.hasCreatIcon=true  
                }
            }
        }else{
            console.log('BBBBBBBBBB')    
            localStorage.setItem('xxzdtabNumber',0)
            this.tabviewName='tabview0'
            this.pagename='支部近期学习重点'
            this.active=0;
            if(this.hasCreat){
                this.hasCreatIcon=true  
            }
        }
        this.$bus.$off('deletesuccess').$on('deletesuccess',()=>{
              Notify({ type: 'success', message: '删除草稿成功' });
        })
    },
    //方法调用
    methods: {
        getUserdatas(){
            getUserdata(Object.assign({userName:this.user.userName}))
                .then((result)=>{
                    if(result.data.data.authPermissions){
                        for(var i = 0; i<result.data.data.authPermissions.length;i++){
                            if(result.data.data.authPermissions[i].permissionCode=='zbjqxxzd:apply1'){
                                this.hasCreat = true;
                                if (this.active==0){  
                                    this.hasCreatIcon=true  
                                }
                            }
                        }
                    }
                })
        },
        searchDialog(){
            if (this.active==0){
                this.showtodoDialog=true;
            }else if (this.active==1){
                this.showtaizhangDialog=true;
            }
        },
        chongzhibutton(){
            if (this.active==0){
                this.showtodoDialog=false;
                this.todoDialogTitle='';
                this.$refs.searchdata.setsearchdata(this.todoDialogTitle)
            }else if (this.active==1){
                this.showtaizhangDialog=false;
                this.strtimeval='';
                this.endtimeval='';
                this.taizhangTitle='';
                this.$refs.searchdata.setsearchdata(this.strtimeval,this.endtimeval
                ,this.taizhangTitle);
            }
        },
        cancelbutton(){
            if (this.active==0){
                this.showtodoDialog=false;
                this.$refs.searchdata.setsearchdata(this.todoDialogTitle)
            }else if (this.active==1){
                this.showtaizhangDialog=false;
                this.$refs.searchdata.setsearchdata(this.strtimeval,this.endtimeval
                ,this.taizhangTitle);
            }
        },
        formatter(type, val) {
            if (type === 'year') {
              return `${val}年`;
            } else if (type === 'month') {
              return `${val}月`;
            } else if (type === 'day') {
              return `${val}日`;
            } else if (type === 'hour') {
              return `${val}时`;
            } else if (type === 'minute') {
              return `${val}分`;
            }
            return val;
        },
        showstrdialogcomfirm(value){
            this.showstrdialog=false;
            this.strtimeval=moment(value).format('YYYY-MM-DD')
        },
        showenddialogcomfirm(value){
            this.showenddialog=false;
            this.endtimeval=moment(value).format('YYYY-MM-DD')
        },
        onchange(index){
            if (index==0){
                localStorage.setItem('xxzdtabNumber',0)
                this.tabviewName='tabview0'
                this.pagename='支部近期学习重点'
                this.active=0
                if(this.hasCreat){
                   this.hasCreatIcon=true  
                }
            }else if (index=1){
                localStorage.setItem('xxzdtabNumber',1)
                this.tabviewName='tabview1'
                this.pagename='支部近期学习重点台账'
                this.active=1
                this.hasCreatIcon=false
            }
        } , 
        gotoMobile(){
          this.addlistener();  
          console.log('gotoMobile')
          if(this.active==0&&this.showtodoDialog){
            this.showtodoDialog=false;  
          }else if(this.active==1&&this.showtaizhangDialog){
            if(this.showstrdialog){
              this.showstrdialog=false; 
              return;
            }
            if(this.showenddialog){
              this.showenddialog=false; 
              return;
            } 
            this.showtaizhangDialog=false;
          }else{
            localStorage.setItem('xxzdtabNumber',0)
            localStorage.setItem('tabactiveNumber', '')
            this.$router.push(
                {
                    name:'mainview',
                    query:{
                    }
                }
            )
          }
        }, 
        addlistener(){
            if (window.history && window.history.pushState) {
                console.log('再次注册物理返回键监听');
                history.pushState(null, null, document.URL);
                window.addEventListener('popstate', this.gotoMobile, false);//false阻止默认事件
            }
        },
        todraw(){
            if(this.active==0){
                this.$router.push(
                    {
                        name:'xxzddetail',
                        query:{
                            location:'zbjqxxzd.start',
                            pmInsId:'',
                            todoType:'0',
                            isdraw:'1'
                        }
                    }
                )
            }
        },
    },
    destroyed () {
        window.removeEventListener('popstate',this.gotoMobile,false);//false阻止默认事件
    },
  }
</script>
<style  scoped>
/* @import url();*/
.item{
      text-align: center;
      width:20%
  }
  .pageview{
      height:100%;
      padding-top: 50px;
      margin-bottom: 60px;
      font-size: 12px;
  }
  .tabview{
      position: fixed;
  bottom: 0;
  width: 100%;
  line-height: var(--footer-height);
  background-color: gray;
  padding-top: 20px;
  padding-bottom: 20px;
  }
  .vh100{
    width: 100%;
  }
  .pf-20{
    padding-right: 20px;
  }
</style>